<!DOCTYPE html>
<html>
  <head>
    <title>Test::jquery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="jquery.min.js" language="JavaScript"></script>
    <script type="text/javascript">
      function onUsernameChanged(input) {
        var val = $('#username').val();
        $('#log').append('onUsernameChanged(' + val + ')<br/>');
        $("h2").text(val);
      }
      function onPasswordChanged() {
        var val = $('#password').val();
        $('#log').append('onPasswordChanged(' + val + ')<br/>');
        $("h2").text(val);
      }
      function onRememberMeChanged() {
        var val = $('#rememberMe').val();
        $('#log').append('onRememberMeChanged(' + val + ')<br/>');
        $("h2").text(val);
      }
      function onHover(element) {
        $(element).text("It's hover!");
      }
      function offHover(element) {
        $(element).text("It's not hover.");
      }
      $(function() {
        $('#double-clickable-button').on('dblclick', function(e) {
          $('h2').text('Double click worked');
          $(this).val("do not click me anymore");
          $(this).attr('disabled', true);
          e.stopImmediatePropagation();
        });
      });
    </script>
  </head>
  <body>
    <h1>Page with JQuery</h1>

    <br/>
    <h1>Now typing: </h1>
    <div id="log"></div>
    <h2></h2>
    <div style="width: 400px">
      <form>
        <fieldset title="Login form">
          <label> Username:
            <input id="username" name="username" value="" onchange="onUsernameChanged(this);"/>
          </label> <br/>
          <label>Password:
            <input id="password" name="password" class="masked" value="" onchange="onPasswordChanged();"/>
          </label> <br/>
          <input type="checkbox" id="rememberMe" name="rememberMe" onchange="onRememberMeChanged();">Remember me<br/><br/>
        </fieldset>
        <input type="button" id="double-clickable-button" value="double click me">
      </form>
    </div>

    <div id="hoverable" onmouseover="onHover(this);" onmouseout="offHover(this);">It's not hover</div>
  </body>
</html>